<template>
    <el-row :gutter="16" style="overflow: hidden" class="h-100">
      <el-col :span="4">
        <wj-card class="box-card h-100">
          <div
              style="width: 100%;height: 32px;margin-bottom:5px;display: flex;justify-content: flex-end;align-content: center;">
            <div>
              <el-button icon="Plus" type="primary" v-if="$hasPer('ISM_SpatialLocation:addBase')"
                         @click="ADDBaseClick(0)">{{ $t('tianJiaJiDi') }}
              </el-button>
            </div>
          </div>
          <out-do-container :over-y-auto="true" style="height: calc(100% - 32px)">
            <el-tree
                default-expand-all
                height="100%"
                :data="treeData"
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
                :highlight-current="true"
                :current-node-key="selectedNodeId"
  
            />
          </out-do-container>
  
        </wj-card>
      </el-col>
      <el-col :span="20" class="h-100">
        <div class="ver-flex h-100">
          <el-card class="Right_Tag_height_class box-card" shadow="never">
            <el-row :gutter="24" style="overflow: hidden">
              <el-col :span="24">
                <h3 class="content_title_class">
                  {{ $t('kongJianWeiZhiXinXi') }} </h3>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  
                  <el-tab-pane disabled name="first">
                    <template #label>{{ $t('jiDi') }}</template>
                    <el-card class="top-search right_height130_class" shadow="never">
                      <el-form
                          ref="ruleFormRef"
                          :model="ruleForm"
                          status-icon
                          label-width="120px"
                          class="demo-ruleForm"
                      >
                        <el-row :gutter="12" style="overflow: hidden;margin-bottom: 16px;">
                          <el-col :span="12">
                            <el-form-item :label="$t('chengShi')" required>
                              <el-input :disabled="disabledFirst" v-model="CityVal" maxlength="50"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item :label="$t('jiDi-0')" required>
                              <el-input :disabled="disabledFirst" v-model="BaseVal" maxlength="25"/>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="12" style="overflow: hidden">
                          <el-col :span="12">
                            <el-form-item :label="$t('bianMa')" required>
                              <el-input :disabled="disabledFirst"
                                        maxlength="6"
                                        onkeyup="value=value.replace(/[^A-Z0-9]/g,'')"
                                        @blur="CodingVal = $event.target.value" v-model="CodingVal"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item :label="$t('paiXu')" required>
                              <el-input-number
  
                                  style="width: 100%"
                                  v-model="SortVal"
                                  class="mx-4"
                                  :min="0"
                                  :max="10000"
                                  controls-position="right"
                                  v-timi-keydown
                              />
                            </el-form-item>
                          </el-col>
                        </el-row>
  
                      </el-form>
                    </el-card>
  
                  </el-tab-pane>
                  <el-tab-pane disabled name="second">
                    <template #label>{{ $t('quYuLouDong') }}</template>
                    <el-card class="top-search right_height130_class" shadow="never">
                      <el-form
                          ref="ruleFormRef"
                          :model="ruleForm"
                          status-icon
                          label-width="120px"
                          class="demo-ruleForm"
                      >
                        <el-row :gutter="12" style="overflow: hidden;margin-bottom: 16px;">
                          <el-col :span="8">
                            <el-form-item :label="$t('jiDi-1')">
                              <el-input disabled v-model="ParentName"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('quYuLouDong-0')" required>
                              <el-input :disabled="disabledFirst" v-model="BaseVal" maxlength="25"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('quanCheng')">
                              <el-input disabled v-model="CityVal" maxlength="50"/>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="12" style="overflow: hidden">
                          <el-col :span="8">
                            <el-form-item :label="$t('bianMa-0')" required>
                              <el-input :disabled="disabledFirst"
                                        maxlength="6"
                                        onkeyup="value=value.replace(/[^A-Z0-9]/g,'')"
                                        @blur="CodingVal = $event.target.value" v-model="CodingVal"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('paiXu')" required>
                              <el-input-number
  
                                  style="width: 100%"
                                  v-model="SortVal"
                                  class="mx-4"
                                  :min="0"
                                  :max="10000"
                                  controls-position="right"
                                  v-timi-keydown
                              />
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('0tVRrfxCjjB4H59Uc1aus')" required>
                              <el-select
                                  filterable
  
                                  v-model="workgroupVal"
                                  :placeholder="$t('30gsUcD0SHtmsQlA9f0Y2')"
                              >
                                <el-option
                                    v-for="item in workgroupList"
                                    :key="item.n_Id"
                                    :label="item.v_Name"
                                    :value="item.n_Id"
                                />
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
  
                      </el-form>
                    </el-card>
                  </el-tab-pane>
                  <el-tab-pane disabled name="third">
                    <template #label>{{ $t('fangWeiLouCeng') }}</template>
                    <el-card class="top-search right_height130_class" shadow="never">
                      <el-form
                          ref="ruleFormRef"
                          :model="ruleForm"
                          status-icon
                          label-width="120px"
                          class="demo-ruleForm"
                      >
                        <el-row :gutter="12" style="overflow: hidden;margin-bottom: 16px;">
                          <el-col :span="8">
                            <el-form-item :label="$t('quYuLouDong-1')">
                              <el-input disabled v-model="ParentName"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('fangWeiLouCeng-0')" required>
                              <el-input :disabled="disabledFirst" v-model="BaseVal" maxlength="25"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('quanCheng-0')">
                              <el-input disabled v-model="CityVal" maxlength="50"/>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="12" style="overflow: hidden">
                          <el-col :span="8">
                            <el-form-item :label="$t('bianMa-1')" required>
                              <el-input :disabled="disabledFirst"
                                        maxlength="6"
                                        onkeyup="value=value.replace(/[^A-Z0-9]/g,'')"
                                        @blur="CodingVal = $event.target.value" v-model="CodingVal"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('paiXu')" required>
                              <el-input-number
  
                                  style="width: 100%"
                                  v-model="SortVal"
                                  class="mx-4"
                                  :min="0"
                                  :max="10000"
                                  controls-position="right"
                                  v-timi-keydown
                              />
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('fuZeRen')" required>
                              <el-select
                                  filterable
  
                                  v-model="PeopleVal"
                                  :placeholder="$t('30gsUcD0SHtmsQlA9f0Y2')"
                              >
                                <el-option
                                    v-for="item in PeopleList"
                                    :key="item.n_EngineerId"
                                    :label="item.v_Engineer"
                                    :value="item.n_EngineerId"
                                />
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
  
                      </el-form>
                    </el-card>
  
                  </el-tab-pane>
                  <el-tab-pane disabled name="fourth">
                    <template #label>{{ $t('fangJian') }}</template>
                    <el-card class="top-search right_height130_class" shadow="never">
                      <el-form
                          ref="ruleFormRef"
                          :model="ruleForm"
                          status-icon
                          label-width="120px"
                          class="demo-ruleForm"
                      >
                        <el-row :gutter="12" style="overflow: hidden;margin-bottom: 16px;">
                          <el-col :span="8">
                            <el-form-item :label="$t('fangWeiLouCeng-1')">
                              <el-input disabled v-model="ParentName"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('fangJian-0')" required>
                              <el-input :disabled="disabledFirst" v-model="BaseVal" maxlength="25"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('quanCheng-1')">
                              <el-input disabled v-model="CityVal" maxlength="50"/>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-row :gutter="12" style="overflow: hidden">
                          <el-col :span="8">
                            <el-form-item :label="$t('bianMa-2')" required>
                              <el-input
                                  onkeyup="value=value.replace(/[^A-Z0-9]/g,'')"
                                  maxlength="6"
                                  @blur="CodingVal = $event.target.value"
                                  :disabled="disabledFirst" v-model="CodingVal"/>
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('paiXu')" required>
                              <el-input-number
  
                                  style="width: 100%"
                                  v-model="SortVal"
                                  class="mx-4"
                                  :min="0"
                                  :max="10000"
                                  v-timi-keydown
                                  controls-position="right"
                              />
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item :label="$t('fuZeRen')" required>
                              <el-select
                                  filterable
  
                                  v-model="PeopleVal"
                                  :placeholder="$t('30gsUcD0SHtmsQlA9f0Y2')"
                              >
                                <el-option
                                    v-for="item in PeopleList"
                                    :key="item.n_EngineerId"
                                    :label="item.v_Engineer"
                                    :value="item.n_EngineerId"
                                />
                              </el-select>
                            </el-form-item>
                          </el-col>
                        </el-row>
  
                      </el-form>
                    </el-card>
  
                  </el-tab-pane>
                  <el-tab-pane disabled name="CustoBtn">
                    <template #label>
                      <el-button icon="Plus" type="primary" v-if="$hasPer('ISM_SpatialLocation:new')"
                                 @click="LocationNewClick">{{ $t('-O8qOw7Ig9BNGmak0TMlY') }}
                      </el-button>
                      <el-button icon="Delete" v-if="$hasPer('ISM_SpatialLocation:submit')" @click="LocationDeleteClick"
                                 type="danger">{{ $t('9kSSh0epGzhn-JSMPfZCB') }}
                      </el-button>
                      <el-button icon="Check" v-if="$hasPer('ISM_SpatialLocation:submit')" @click="LocationSumbit"
                                 type="primary">{{ $t('0tjlX-m42dyKO7-5dl0Ca') }}
                      </el-button>
                    </template>
  
  
                  </el-tab-pane>
  
  
                </el-tabs>
              </el-col>
            </el-row>
          </el-card>
          <el-row :gutter="24" class="mt16 flex-1" style="overflow: hidden">
            <el-col :span="24" class="h-100">
              <wj-card class="box-card h-100">
  
  
                <el-row :gutter="12" style="overflow: hidden">
                  <el-col :span="24">
                    <h3 style="margin-bottom: 10px;" class="content_title_class">
                      {{ $t('kongJianWeiZhiQuanXian') }} </h3>
                  </el-col>
                </el-row>
                <el-row :gutter="12" style="overflow: hidden;height:calc(100% - 32px)">
                  <el-col :span="24" class="h-100">
                    <el-form
                        ref="ruleFormRef"
                        :model="ruleForm2"
                        status-icon
  
                        class="demo-ruleForm"
                    >
                      <el-row :gutter="12" style="overflow: hidden">
                        <el-col style="display: flex" :span="12">
                          <el-form-item style="width: 33.3%;height: 32px;" label="工作组">
                            <el-select
                                filterable
                                clearable
                                v-model="SearchWorkVal"
                                :placeholder="$t('30gsUcD0SHtmsQlA9f0Y2')"
                            >
                              <el-option
                                  v-for="item in workgroupList"
                                  :key="item.n_Id"
                                  :label="item.v_Name"
                                  :value="item.n_Id"
                              />
                            </el-select>
                          </el-form-item>
                          <el-form-item style="width: 33.3%;height: 32px;margin:0 16px 0 16px" label="成员">
                            <el-select
                                filterable
                                clearable
                                v-model="SearchPeopleVal"
                                :placeholder="$t('30gsUcD0SHtmsQlA9f0Y2')"
                            >
                              <el-option
                                  v-for="item in member"
                                  :key="item.n_Id"
                                  :label="item.v_Name"
                                  :value="item.n_Id"
                              />
                            </el-select>
                          </el-form-item>
                          <el-form-item style="width: 33.3%;line-height: 32px;height: 32px;" label="">
                            <el-button icon="Search" type="primary" @click="QueryClick">{{
                                $t('oAfTaQRQmXk2VtRsiRDDi')
                              }}
                            </el-button>
                          </el-form-item>
                        </el-col>
  
                      </el-row>
  
  
                    </el-form>
                    <out-do-container style="height:calc(100% - 100px)">
                      <el-table border :data="tableData"
                                height="100%" style="width: 100%;"
                      >
                        <el-table-column type="index" :label="$t('u2OYfxzTI5_fWlQZx6f-9')" align="center"
                                         :index="getIndex" width="80"/>
                        <el-table-column align="center" prop="v_Name" :label="$t('kongJianWeiZhi-0')" min-width="130"
                                         show-overflow-tooltip/>
                        <el-table-column align="center" prop="v_GroupName" :label="$t('0tVRrfxCjjB4H59Uc1aus')"
                                         min-width="130" show-overflow-tooltip/>
                        <el-table-column align="center" prop="v_HeadName" :label="$t('fuZeRen')" min-width="130"
                                         show-overflow-tooltip/>
                        <el-table-column :label="$t('xieZhuRen')" min-width="200" show-overflow-tooltip>
                          <template v-slot="{row}">
                            {{ row.helper }}
                          </template>
                        </el-table-column>
                      </el-table>
                    </out-do-container>
  
                    <el-pagination
                        v-model:current-page="currentPage4"
                        v-model:page-size="pageSize4"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
  
                  </el-col>
                </el-row>
  
  
              </wj-card>
            </el-col>
          </el-row>
        </div>
  
      </el-col>
    </el-row>
  
  </template>
  
  <script lang="ts">
  import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
  
  import {defineComponent, ref, reactive, onMounted} from 'vue'
  import {ElMessage, ElMessageBox, ElTree} from 'element-plus';
  import type {TabsPaneContext} from 'element-plus'
  import {LocationTree, LocationDelete, LocationAdd, LocationUpdate, LocationQueryList} from "/@/api/centerControl/SpatialLocation";
  import {
    EngineerList,
    WorkLeftGetList, MemberGetList, GroupDelete
  } from "/@/api/centerControl/WorkingMana";
  
  import wjCard from "./tm/wj-card.vue"
  import outDoContainer from "./tm/outdo-container.vue"
  
  export default defineComponent({
    name: 'index',
    components: {
      ElTree,
      wjCard,
      outDoContainer
    },
    setup() {
      const {proxy} = useCurrentInstance();
      const $t = proxy.$t;
      // 分页 页码
      const currentPage4 = ref(1)
      // 分页 每页页数
      const pageSize4 = ref(10)
      // 总共条数
      const total = ref(0)
      const tableData = ref([])//表格
      // 区分是编辑还是添加
      const BtnUpAdd = ref<string>('')
      const disabledFirst = ref<boolean>(false)
      const CityVal = ref<string>('')//城市 全称
      const ParentName = ref<string>('')// 父级名称
      const BaseVal = ref<string>('')//基地
      const CodingVal = ref<string | number>('')// 编码
      const SortVal = ref<number>(1)//排序
      const workgroupVal = ref<number | null>()//工作组 传给后端
      const PeopleVal = ref<number | null>()//负责人 传给后端
      // 查询参数工作组
      const SearchWorkVal = ref<string | number>('')
      // 查询参数员工
      const SearchPeopleVal = ref<string | number>('')
      // 树形结构数据
      const treeData = ref([]);
      // 查询负责人下拉
      const PeopleList = ref([]);
      // 查询工作组下拉
      const workgroupList = ref([]);
      // 成员下拉
      const member = ref([]);
      // 获取当前选中的级别
      const TreeLevel = ref<any>(0);
      //树的节点
      const TreeId = ref<number | null>();
      const SearchTreeID = ref<number | null>();
      const FatherID = ref<number | null>();
  
      // tags默认第一页
      const activeName = ref('first')
      const ruleForm = reactive({
        pass: '',
        checkPass: '',
        age: '',
      })
      const ruleForm2 = reactive({})
      const handleClick = (tab: TabsPaneContext, event: Event) => {
        let tabVal = JSON.parse(JSON.stringify(tab))
        // let eventVal = JSON.parse(JSON.stringify(event))
        activeName.value = tabVal.paneName
        // console.log(tabVal.paneName, eventVal)
      }
      // 默认 props 配置项
      const defaultProps = {
        children: 'children',
        label: 'v_Name',
      };
  
      // 当前选中的节点 id
      const selectedNodeId = ref(null as any);
      onMounted(() => {
        // 在这可以默认选中
        // selectedNodeId.value = 1
        getLocationTree()
        getWorkGroup()
        getMemberGroup()
        DefaultTable()
  
      })
      // 查询事件
      const QueryClick = () => {
        currentPage4.value = 1
        DefaultTable()
      }
      // 新建事件
      const LocationNewClick = () => {
        EmptyFirst()
        // 区分是编辑还是添加
  
        if (selectedNodeId.value !== null) {
          BtnUpAdd.value = 'add'
          if (TreeLevel.value === 1) {
            activeName.value = 'second';
          } else if (TreeLevel.value === 2) {
            activeName.value = 'third';
          } else if (TreeLevel.value === 3) {
            activeName.value = 'fourth';
          } else if (TreeLevel.value === 4) {
            activeName.value = 'first';
            ADDBaseClick(0)
          }
        } else {
          ElMessage({
            type: "info",
            message: $t('qingXuanZeZuoBianDeShuZaiJinHangCaoZuo')
          })
        }
  
      }
      // 删除事件
      const LocationDeleteClick = () => {
        if (selectedNodeId.value !== null) {
          ElMessageBox.confirm(
              $t('NA5prVnS7_ctpW1awmRAY'),
              $t('D9o2FQeTTrlXvHHClDrBW'),
              {
                confirmButtonText: $t('KKQHK39_ePUcWbKYuYb0b'),
                cancelButtonText: $t('3aj4Qf-q8AettexptNUsZ'),
                type: 'warning',
              }
          )
              .then(() => {
                LocationDelete({n_Id: selectedNodeId.value}).then((res) => {
  
                  currentPage4.value = 1
                  selectedNodeId.value = null
                  EmptyFirst()
                  getLocationTree()
                  DefaultTable()
                  BtnUpAdd.value = ''
                })
  
              })
              .catch(() => {
                ElMessage({
                  type: 'info',
                  message: $t('AveZ9OXDPdQYfLnmkeYIo'),
                })
              })
  
        } else {
          ElMessage({
            type: "info",
            message: $t('qingXuanZeZuoBianDeShuZaiJinHangCaoZuo')
          })
        }
      }
      // 保存按钮（保存或编辑）
      const LocationSumbit = () => {
        if (BtnUpAdd.value == '') {
          ElMessage($t('qingDianJiTianJiaJiDiAnNiuZaiJinHangCaoZuo'))
          return false
        }
        if (activeName.value === 'first' && CityVal.value === '') {
          ElMessage({type: "info", message: $t('qingShuRuChengShi')})
          return false
        }
        if (BaseVal.value === '') {
          ElMessage({type: "info", message: $t('qingShuRuMingCheng')})
          return false
        }
        if (CodingVal.value === '') {
          ElMessage({type: "info", message: $t('qingShuRuBianMa')})
          return false
        }
        if (activeName.value === 'second' && workgroupVal.value === null) {
          ElMessage({type: "info", message: $t('qingXuanZeGongZuoZu')})
          return false
        }
        if ((activeName.value === 'fourth' || activeName.value === 'third') && PeopleVal.value === null) {
          ElMessage({type: "info", message: $t('qingXuanZeFuZeRen')})
          return false
        }
        //增加
        if (BtnUpAdd.value === 'add') {
          TreeLevel.value = TreeLevel.value + 1
          let sumList = {
            v_Name: BaseVal.value,
            n_ParentId: Number(selectedNodeId.value),
  
            n_Level: TreeLevel.value,
            v_Code: CodingVal.value,
  
            n_Sort: Number(SortVal.value),
            v_FullName: CityVal.value,
  
            n_GroupId: workgroupVal.value,
            n_HeadId: PeopleVal.value,
          }
          LocationAdd(JSON.parse(JSON.stringify(sumList))).then((res: any) => {
            EmptyFirst()
            getLocationTree()
            BtnUpAdd.value = ''
          }).catch((err: any) => {
            EmptyFirst()
            getLocationTree()
            BtnUpAdd.value = ''
          })
  
        } else if (BtnUpAdd.value === 'update') {
          // 编辑
          let sumList = {
            n_Id: TreeId.value,
            n_GroupId: workgroupVal.value,
            n_Sort: SortVal.value,
            n_HeadId: PeopleVal.value,
          }
          LocationUpdate(JSON.parse(JSON.stringify(sumList))).then(res => {
            EmptyFirst()
            getLocationTree()
            // BtnUpAdd.value ='add'
            BtnUpAdd.value = ''
          }).catch(() => {
            EmptyFirst()
            getLocationTree()
            BtnUpAdd.value = ''
            // BtnUpAdd.value ='add'
          })
        } else {
          ElMessage($t('qingDianJiTianJiaJiDiAnNiuZaiJinHangCaoZuo-0'))
        }
        TreeLevel.value = 0
        selectedNodeId.value = null
      }
  
      // 处理节点点击事件
      function handleNodeClick(data: any) {
        // console.log(data)
        let FullName = data.v_FullName
        let ParentNa = data.v_ParentName
        let FaterID = data.n_ParentId
        let Treeid = data.n_Id
        let v_Name = data.v_Name
        let GroupId = data.n_GroupId
        let n_HeadId = data.n_HeadId
        let v_Code = data.v_Code
        let n_Sort = data.n_Sort
        TreeLevel.value = data.n_Level
  
        if (data.n_Level === 1) {
          activeName.value = 'first'
        } else if (data.n_Level === 2) {
          activeName.value = 'second'
        } else if (data.n_Level === 3) {
          activeName.value = 'third'
        } else if (data.n_Level === 4) {
          activeName.value = 'fourth'
        }
  
        if (data.n_Id === selectedNodeId.value) {
          // 如果当前节点已经选中，则取消选中
          selectedNodeId.value = null;
          TreeLevel.value = 0
          BtnUpAdd.value = 'add'
          // console.log( selectedNodeId.value,"取消选中")
          EmptyFirst()
          SearchTreeID.value = null
          currentPage4.value = 1
          DefaultTable()
        } else {
          disabledFirst.value = true
          // 否则选中当前节点
          BtnUpAdd.value = 'update'
          selectedNodeId.value = data.n_Id;
  
          CityVal.value = FullName
          ParentName.value = ParentNa
          BaseVal.value = v_Name
          CodingVal.value = v_Code
          SortVal.value = n_Sort
          disabledFirst.value = true
          workgroupVal.value = GroupId
          PeopleVal.value = n_HeadId
          TreeId.value = Treeid
          SearchTreeID.value = Treeid
          FatherID.value = FaterID
          // console.log( selectedNodeId.value,"当前选中的节点")
          // 查询负责人下拉
          MemberGetList({N_Group: GroupId}).then(res => {
            PeopleList.value = res.data.rows
          })
  
          currentPage4.value = 1
          DefaultTable()
        }
      }
  
      // 清空选项
      const EmptyFirst = () => {
        CityVal.value = ''
        BaseVal.value = ''
        CodingVal.value = ''
        SortVal.value = 1
        disabledFirst.value = false
  
        // this.TreeID = null
        workgroupVal.value = null
        PeopleVal.value = null
        ParentName.value = ''
      }
      // 添加基地
      const ADDBaseClick = (val: number) => {
        EmptyFirst()
        SearchTreeID.value = null
        currentPage4.value = 1
        DefaultTable()
        TreeId.value = 0
        BtnUpAdd.value = 'add'
        activeName.value = 'first';
        TreeLevel.value = 0
        selectedNodeId.value = null
      }
      // 空间位置树查询
      const getLocationTree = () => {
        LocationTree({N_Id: 0, N_GroupId: 0, N_HeadId: 0}).then(res => {
          treeData.value = res.data
        })
      }
      // 工作组查询
      const getWorkGroup = () => {
        WorkLeftGetList({}).then(res => {
          workgroupList.value = res.data
        })
      }
      // 成员查询
      const getMemberGroup = () => {
        EngineerList({}).then(res => {
          member.value = res.data
        })
      }
  
      // 表格排序事件
      const getIndex = (index: number) => {
        let page = currentPage4.value
        let size = pageSize4.value
        return (page - 1) * size + index + 1
      }
      // 分页
      const handleSizeChange = (val: number) => {
        currentPage4.value = 1
        pageSize4.value = val
        DefaultTable()
      }
      // 分页
      const handleCurrentChange = (val: number) => {
        currentPage4.value = val
        DefaultTable()
      }
      // 表格默认查询
      const DefaultTable = () => {
        let sumRequest = {
          PageNo: currentPage4.value,
          PageSize: pageSize4.value,
          N_Id: Number(selectedNodeId.value),
          N_GroupId: Number(SearchWorkVal.value),
          N_HeadId: Number(SearchPeopleVal.value),
        }
        LocationQueryList(sumRequest).then((res: any) => {
          tableData.value = []
          if (res) {
            let arr = res.data.rows
            arr.forEach((item: any) => {
              if (item.helper !== null) {
                item.helper = item.helper.toString()
              } else {
                item.helper = ''
              }
  
            })
            arr = [...arr]
            tableData.value = arr
            total.value = res.data.totalRows
          }
        })
      }
      return {
        treeData,
        defaultProps,
        selectedNodeId,
        activeName,
        TreeLevel,
        TreeId,
        ruleForm,
        ruleForm2,
        workgroupList,
        member,
        SearchPeopleVal,
        FatherID,
        SearchWorkVal,
        CityVal,
        ParentName,
        BaseVal,
        CodingVal,
        SortVal,
        disabledFirst,
        workgroupVal,
        PeopleVal,
        SearchTreeID,
        PeopleList,
        currentPage4,
        pageSize4,
        total,
        tableData,
        DefaultTable,
        QueryClick,
        handleSizeChange,
        getIndex,
        handleCurrentChange,
        ADDBaseClick,
        handleClick,
        handleNodeClick,
        getLocationTree,
        LocationNewClick,
        LocationDeleteClick,
        LocationSumbit
  
      };
    },
  });
  </script>
  
  <style scoped lang="scss">
  @import "./assets/styles/ism.scss";
  
  :deep(.el-tabs__nav.is-top) {
    width: 100%;
    position: relative;
  }
  
  :deep(.el-tabs__nav  #tab-CustoBtn) {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    line-height: 32px;
  }
  
  .el-row:last-child {
    margin-bottom: 0;
  }
  </style>